<template>
    <div>
        <!-- 轮播图区域 -->
      <mt-swipe :auto="2000">
        <mt-swipe-item v-for="item in lunbotuList" :key="item.array">
         <img :src="item.thumbnail" alt="">
        </mt-swipe-item>
   <!-- <mt-swipe-item>1</mt-swipe-item>
  <mt-swipe-item>2</mt-swipe-item>
  <mt-swipe-item>3</mt-swipe-item> -->
    </mt-swipe>

<!-- 六宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newlist">
                    <img src="https://www.easyicon.net/api/resizeApi.php?id=1186947&size=64" alt="">
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                     <img src="https://www.easyicon.net/api/resizeApi.php?id=1222039&size=64" alt="">
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/shop">
                       <img src="https://www.easyicon.net/api/resizeApi.php?id=1231962&size=64" alt="">
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="https://www.easyicon.net/api/resizeApi.php?id=1218978&size=64" alt="">
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                      <img src="https://www.easyicon.net/api/resizeApi.php?id=1230171&size=64" alt="">
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                      <img src="https://www.easyicon.net/api/resizeApi.php?id=1139773&size=64" alt="">
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul> 
        <i class="iconfont icon-grow-up" style="color:red;"></i>

    </div>
</template>
<script>
import{Toast}from 'mint-ui'

export default {
    data(){
        return{
            lunbotuList:[]//保存轮播图的数组
        }
    },
    created() {
        this.getlunbotu();
    },
    methods: {
        getlunbotu(){//获取轮播图数据方法
            this.$http.get('satinGodApi?type=5&page=1').then(result=>{
                console.log(result.body);
                if(result.body.code===200){
                    this.lunbotuList=result.body.data;
                    // console.log(result.body);
                    
                }else{
                    Toast("加载轮播图失败")
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
// .mint-swipe{
//     height: 200px;
//     .mint-swipe-items-wrap{
//         &:nth-child(1){
//             background:red;
//         }
//          &:nth-child(2){
//             background:yellow;
//         }
//          &:nth-child(3){
//             background:hotpink;
//         }
//     }
// }
//scss语法
.mint-swipe{
     height: 200px;
     img{
         width:100%;
         height: 100%;
     }
}
.mui-grid-view.mui-grid-9{
    background: #fff;
    border: none;
    img{
        height: 60px;
        width: 60px;
        background-size: 100%;
    }
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border: none;
    .mui-media-body{
        font-size: 13px;
    }
}
</style>
